import React from 'react'
import {
    View,
    Modal,
    TouchableOpacity,
    Image,
    Dimensions,
} from 'react-native'
import { Text } from '@rneui/themed'

const { width: screenWidth, height: screenHeight } = Dimensions.get('window')

interface ImagePreviewModalProps {
    visible: boolean
    imageUrl?: string
    imageName?: string
    onClose: () => void
}

const ImagePreviewModal: React.FC<ImagePreviewModalProps> = ({
    visible,
    imageUrl,
    imageName,
    onClose
}) => {
    return (
        <Modal
            visible={visible}
            transparent={true}
            animationType="fade"
            onRequestClose={onClose}
        >
            <View style={{
                flex: 1,
                backgroundColor: '#000',
                justifyContent: 'center',
                alignItems: 'center',
            }}>
                {/* 顶部关闭按钮 */}
                <View style={{
                    position: 'absolute',
                    top: 50,
                    right: 20,
                    zIndex: 2001,
                }}>
                    <TouchableOpacity
                        style={{
                            width: 40,
                            height: 40,
                            borderRadius: 20,
                            backgroundColor: 'rgba(255, 255, 255, 0.2)',
                            justifyContent: 'center',
                            alignItems: 'center',
                            borderWidth: 1,
                            borderColor: 'rgba(255, 255, 255, 0.3)',
                        }}
                        onPress={onClose}
                    >
                        <Text style={{ fontSize: 24, color: '#fff', fontWeight: 'bold' }}>×</Text>
                    </TouchableOpacity>
                </View>

                {/* 图片标题 */}
                {imageName && (
                    <View style={{
                        position: 'absolute',
                        top: 50,
                        left: 20,
                        zIndex: 2001,
                        maxWidth: screenWidth - 100,
                    }}>
                        <Text style={{
                            color: '#fff',
                            fontSize: 16,
                            fontWeight: 'bold',
                            textShadowColor: 'rgba(0, 0, 0, 0.8)',
                            textShadowOffset: { width: 1, height: 1 },
                            textShadowRadius: 3,
                        }} numberOfLines={2}>
                            {imageName}
                        </Text>
                    </View>
                )}

                {/* 全屏图片显示 */}
                {imageUrl && (
                    <View style={{
                        width: screenWidth,
                        height: screenHeight,
                        justifyContent: 'center',
                        alignItems: 'center',
                    }}>
                        <Image
                            source={{ uri: imageUrl }}
                            style={{
                                width: screenWidth,
                                height: screenHeight,
                            }}
                            resizeMode="contain"
                        />
                    </View>
                )}
            </View>
        </Modal>
    )
}

export default ImagePreviewModal
